<template>
  <div>
    <h1>封装表单</h1>
    <YDform
      :formItems="formItems"
      :labelWidth="labelWidth"
      :itemStyle="itemStyle"
      :colLayout="colLayout"
      :formData="formData"
      @newBtnclick=handleNewClick
    >
      <!-- 这种方法也可以表示插槽 -->
      <!-- <template slot='header'>
        <h2>检索检索</h2>
    </template> -->
    </YDform>
  <div class="content">
     <YDtable :propList='propList' :problemList='problemList' :showIndexColumn='showIndexColumn' :showSelectColumn='showSelectColumn'>
       <!-- 结构取出data -->
       <template slot="status" slot-scope="{data}">  <el-button  size="mini" plain :type="data.status == '生效' ? 'success' : 'danger'">{{data.status}}</el-button> </template>
       <!-- 作用域插槽 传递点击当前行的内容参数 -->
       <template slot="handler"  slot-scope="{data}">
          <div class="WorkOrder_handler">
          <el-button type="text" size="mini">查看详情</el-button>
          <el-button  type="text" size="mini" @click="handleEditClick(data)">编辑</el-button>
          <el-button  type="text" size="mini" @click="handleDeleteClick(data)">关闭</el-button>
          <el-button  type="text" size="mini">提醒</el-button>
         </div>
         </template>
     </YDtable>
 </div> 

 <div class="page-model">
<YDModel ref="Model" :defaultInfo="defaultInfo"></YDModel>
 </div>

 
    
  </div>
</template>

<script>
import YDform from "./Form/Form.vue";
 import YDtable from './Table/Table.vue'
 import YDModel from './Model/Model.vue'
export default {
  data() {
    return {
      //双向绑定数据应该由配置文件中的field来获取  但是工单系统写死也行 
      formData: {
        createTime: "",
        name: "",
        status: "",
      },
      /*
       * @props传入信息
       */
      //这样可以使用 但是违反单项数据流 修改了props里面的内容
      formItems: [
        {   
          field: "createTime", //配置属性
          label: "创建时间",
          type: "datepicker",
          // rules: "",   //配置检查规则
          otherOptions: {
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            type: "daterange",
          },
        },
        {
          field: "name",
          label: "用户名",
          type: "input",
          // rules: "",
          placeholder: "请输入用户名",
        },

        {
          field: "status",
          label: "处理状态",
          type: "select",
          // rules: "",
          placeholder: "请选择状态",
          options: [
            {
              id: 0,
              title: "生效",
              value: "生效",
            },
            {
              id: 1,
              title: "失效",
              value: "失效",
            },
          ],
        },
      ],
      //描述宽度
      labelWidth: "120px",
      //样式
      itemStyle: {
        padding: "10px 0px",
      },
      colLayout: {
        span: 6, //固定写死 搜索框就是6
      },
      //表头行
      propList:[
         //插槽名字 slotName 需要改变的状态就可以改
         {label:"操作",minWidth:"120",slotName:"handler"},
        {prop:'problem',label:"问题描述", minWidth:"120", slotName:'problem' },
        {prop:'username',label:"用户名", minWidth:"120"},
        {prop:'createTime',label:"创建时间", minWidth:"120" , slotName:'createTime'},
        {prop:'status',label:"处理状态", minWidth:"120",slotName:'status' },
       
       
         
      ],
      //问题列
      
      problemList:[
        {
          problem:'音频听不了了',
          username:'李磊',
          createTime:'2021-06-07',
          status:'生效',
          operation:'1',
           id:'1'
         
        },
         {
          
          problem:'我的app闪退',
          username:'王文涛',
          createTime:'2021-08-07',
          status:'失效',
           operation:'1',
             id:'2'
        }
      ],
        //序号列
       showIndexColumn:false,
       //是否可以选中
       showSelectColumn:false,
       //编辑操作
       defaultInfo:{},

     
    
    };
  },

  components: {
    YDform,
    YDtable,
    YDModel
  },

  methods: { 
    //拿到当前那一行的数据删除
 handleDeleteClick(data){
     console.log(data);
 },
 //编辑
 handleEditClick(data){
    // console.log(data);
    //编辑 将传进来的参数 浅拷贝 怕影响其他的参数
    this.defaultInfo={...data}
   this.$refs.Model.dialogVisible = true
 },
 //新建
 handleNewClick(){
   this.defaultInfo={}
  this.$refs.Model.dialogVisible = true
 }
  },
};
</script>

<style scoped>
.content{
  padding: 20px;
}
</style>